<template>
  <div class="box">
    <div ref="left" class="box-left">
      <div class="left">
        <slot name="left"></slot>
      </div>

      <slot name="leftBottom"></slot>
    </div>
    <div ref="control" class="box-toolBar flex-center-center">
      <div class="box-toolBar-trigger">
        <i v-for="item in 6" :key="item" class="box-toolBar-trigger-bar"></i>
      </div>
    </div>
    <div ref="main" class="box-main">
      <slot name="main"></slot>

      <div class="pagination">
        <slot name="pagination"></slot>
      </div>
    </div>
  </div>
</template>
<script>
import borderDrag from "@/util/borderDrag.js";

export default {
  mounted() {
    this.$nextTick(() => {
      new borderDrag(this.$refs.left, this.$refs.control);
    });
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;

  .box-toolBar {
    height: 100%;
    width: 8px;
    border-left: 1px solid #c9d3d7;
    border-right: 1px solid #c9d3d7;
    background-color: #f1f2f3;

    .box-toolBar-trigger-bar {
      width: 6px;
      height: 2px;
      background-color: #bec2c7;
      float: left;
      margin-top: 4px;
    }
  }

  .box-left {
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;

    .left {
      overflow: auto;
      flex: 1;
    }
  }

  .box-main {
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    #container {
      flex: 1;
      height: 0;
      overflow: auto;
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 16px;
    }
  }
}

//.box-toolBar {
//  cursor: n-resize;
//  flex-shrink: 0;
//  height: 8px;
//  background: #ecefee;
//  display: flex;
//  justify-content: center;
//  align-items: center;
//
//  i {
//    height: calc(100% - 2px);
//    width: 2px;
//    background: #c4c6c5;
//    margin: 0 3px;
//  }
//}
</style>
